<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            width: 100%;
            height: 500px;
            overflow: hidden;
        }

        body {
            background-color: #f2f2f2
        }

        #result {
            width: 100%;
            font-size: 12px;
        }

        dl, dt, dd, ul, li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        p {
            font-size: 12px;
        }

        dt {
            font-size: 14px;
            font-family: "微软雅黑";
            font-weight: bold;
            border-bottom: 1px dotted #000;
            padding: 5px 0 5px 5px;
            margin: 5px 0;
        }

        dd {
            padding: 5px 0 0 5px;
        }

        li {
            line-height: 28px;
        }
    </style>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <title>地图查询</title>
</head>
<body>
<div class="layui-form" id="" style="background-color: #f2f2f2;margin-top:16px">
    <div class="layui-form-item" style="margin-left: 20px">
        <button class="layui-btn layui-btn-radius layui-btn-normal" lay-filter="option" id="add">添加
        </button>
    </div>
</div>
<table class="layui-hide" id="baiDuMapList" lay-filter="baiDuMapList"></table>
<script src="/layui/layui.all.js"></script>
<script type="text/html" id="barDemo">
    <!--<a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit">修改</a>-->
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del">删除</a>
</script>
<script type="text/javascript">
    var layer;
    layui.use(['element', 'layer', 'form'], function () {
        var table = layui.table;
        var element = layui.element;
        var $ = layui.jquery;
        layer = layui.layer;
        var form = layui.form;
        table.render({
            elem: '#baiDuMapList',
            url: '/baiDuMap/getmap',
            cols: [
                [{
                    title: '序号',
                    type: 'numbers'
                }, {
                    title: '地图编号',
                    field: 'id',
                    align: 'center',
                }, {
                    title: '形状',
                    templet: function (d) {
                        return d.overlayNumber + '边形'
                    },
                    align: 'center',
                }, {
                    title: '填充色',
                    field: 'fillColor',
                    align: 'center',
                }, {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo',
                }],
            ],
            page: true,
            done: function (res, curr, count) {// 表格渲染完成之后的回调
                console.log('res.data:', res.data)
                for (var i = 0; i < res.data.length; i++) {
                    $("tbody tr").eq(i).css("color", res.data[i].fillColor)
                }
            }
        });
        //监听行工具事件
        table.on('tool(baiDuMapList)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确认删除?', function (index) {
                    $.ajax({
                        url: '/baiDuMap/deleteMap',
                        method: "post",
                        data: data,
                        success: function (d) {
                            obj.del();
                            layer.close(index);
                            layer.msg(d.msg);
                        },
                        error: function () {
                            // layer.msg("添加失败");
                            layer.msg("ajax执行失败");
                        }
                    });
                });
            } else if (obj.event === 'edit') {

            }
        });
        $('#add').click(function () {
            window.location.href = "/mapJump/addMap";
        })
    })
</script>
</body>
</html>